<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue-router-2.7.0.js" type="text/javascript" charset="utf-8"></script>
		<style>
			*{
				margin: 0;padding: 0;
			}
			
			.header{
				width: 100%;
				height: 100px;
				background-color: #EEA236;
				line-height: 100px;
				text-align:center;
			}
			
			.container{
				display: flex;
				height: 800px;
			}
			
			.left{
				flex: 1;
				background-color: #006600;
				height: 100%;
			}
			
			.main{
				flex: 4;
				background-color: #66AFE9;
				height: 100%;
				
			}
		</style>
	</head>
	<body>
		<div id="app">
			<router-view></router-view>
			<div class="container">
				<!--left main 是字符串-->
				<router-view name='left'></router-view>
				<router-view name='main'></router-view>
			</div>
		</div>
		<script type="text/javascript">
			var header={
				template:'<h1 class="header">header头部区域组件</h1>'
			}
			
			var leftBox={
				template:'<h1 class="left">left侧边栏组件</h1>'
			}
			
			var mainBox={
				template:'<h1 class="main">main主体区域组件</h1>'
			}
			
			var router= new VueRouter({
				routes:[
					{
						path:'/',components:{
							'default':header,
							'left':leftBox,
							'main':mainBox
						}
					}

				]
			})
			
			new Vue({
				el:"#app",
				router
			});
		</script>
	</body>
</html>
